/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import Dimensions from 'Dimensions';
import React, { Component, PropTypes } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Alert
} from 'react-native';

import {
	MapView,
	MapTypes,
	Geolocation
} from 'react-native-baidu-map';
let	a = 39.922704
let	b = 116.416636
const WS = new WebSocket("ws://60.205.218.105:1313")
//const WS = new WebSocket("ws://192.168.1.48:1313")
export default class DolovMap extends Component < {} > {
	constructor() {
		super();

		this.state = {	
			id:null,//用户ID
			time:null,//定时器
			zoom: 13,//默认缩放等级
			zoomControlsVisible: false,//缩放组件是否显示
			trafficEnabled: false,//交通图
			baiduHeatMapEnabled: false,//百度地图热力图	
			mapType:1,//地图类型 1--一般性的二维地图 2--卫星地图
			markers:[],
		    onMapStatusChange: "",//地图放大，移动等变化时回调
		    onMapLoaded: "",//地图加载时调用函数
		    onMapClick: "",//点击地图时调用函数,回调经纬度
		    onMapDoubleClick:"",// 双击地图时调用，回调经纬度
		    onMarkerClick:"",// 点击标记时回调
		    onMapPoiClick:"",// 点击（标点，位置）回调
		};
	}
	//组件将要加载时
	componentDidMount(){
		this.setLocation();
		this.setMapCenter();
		this.connectSocket();
	}
	//当组件将要卸载的时候，去除，时间循环器
	componentWillUnmount() {
		clearInterval(this.state.time);
		WS.disconnect();
	}
	connectSocket(){
		let that = this;
		WS.onopen = function(e){
			Alert.alert('tip','链接webSocket成功')
		}
		WS.onclose = function(e){
			Alert.alert('tip','链接关闭')
		}	
		//收到服务器发送的位置信息后设置坐标点
		WS.onmessage = function(e){
			let message = JSON.parse(e.data);
			if(message.type=='assign'){
				that.setState({
					id:message.userId
				});
				return;
			}
			let markers = [];
			
			for(let marker in message){
				markers.push(message[marker])
			}
			that.setState({
				markers:[...markers]
			})
				
			
		}
	}
	//定时获取位置信息
	setLocation(){
		this.getCurrentPosition();		
		this.state.time = setInterval(() => {
			this.getCurrentPosition();
		}, 5000);
	}
	//设置地图初始化位置
	async setMapCenter(){
		let {
			latitude,
			longitude
		} = await Geolocation.getCurrentPosition();
		this.setState({			
			center: {
				latitude,
				longitude
			}
		});
		
	}
	//获取并发送位置信息至服务器
	async getCurrentPosition() {		
		let {
			latitude,
			longitude
		} = await Geolocation.getCurrentPosition();
		let userId = this.state.id;
		WS.send(JSON.stringify({
			source:userId,
			location:{latitude,longitude,title:"haha"}
		}))
	}
	
	render() {
		return(
			<View style={styles.container}>
		      	<MapView
		      		style={styles.map}
		      		zoom={this.state.zoom}
		      		zoomControlsVisible={this.state.zoomControlsVisible}
		      		trafficEnabled={this.state.trafficEnabled}
		      		baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
		      		mapType={this.state.mapType}
		      		markers={this.state.markers}
		      		center={this.state.center}		      		
		      	/>
		     </View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	map: {
		width: Dimensions.get('window').width,
		height: Dimensions.get('window').height,

	}
});